<template>
	<div class="black_top_box" v-if="isShow">
		<div class="icon" @click="goBackTopFN">
			<img src="../../assets/images/gotop_b.png" />
		</div>
	</div>
</template>

<script>
	import { smoothScrollTop, getPositionY, } from "@/assets/js/utils/utils.js";

	export default {
		data() {
			return {
				isShow: false,
				scrollTop: 0,
			};
		},
		mounted() {
			window.addEventListener('scroll', this.handleScroll, true);
		},
		destroyed() {
			window.removeEventListener('scroll', this.handleScroll);
		},
		methods: {
			handleScroll(e) {
				let scrollTop = document.documentElement.scrollTop || document.body.scrollTop || window.pageYOffset;
				//console.log(scrollTop)
				if(scrollTop < 1600) {
					this.isShow = false;
				} else {
					this.isShow = true;
				}
			},
			goBackTopFN() {
				smoothScrollTop();
			},
		}
	}
</script>

<style lang='scss' scoped>
	@import '~@/assets/css/mixin';
	.black_top_box {
		position: fixed;
		bottom: rem(120);
		right: rem(20);
		z-index: 10;
		.icon {
			width: rem(80);
			height: rem(80);
			display: flex;
			justify-content: center;
			align-items: center;
			overflow: hidden;
			border-radius: rem(60);
			background: #fff;
			box-shadow: rem(1) rem(1) rem(10) #ccc;
			img {
				width: 70%;
			}
		}
	}
</style>